<template>
    <view :style="{ '--color': color }">
        <!-- #ifdef MP-WEIXIN -->
        <navBar :bgMake="5" :Color="2" :title="title"></navBar>
        <!-- #endif -->
        <view class="viewbox auto m-top20 Info">
            <view class="row a-center j-sb">
                <view class="d-flex f-column white">
                    <text class="size30">可提现金额 (元)</text>
                    <text class="size50 m-top10">{{ commission.income }}</text>
                </view>
                <view class="withdraw_btn" @click="toUrl('withdraw?cashMethodArr=' + JSON.stringify(commission.cashMethodArr))">提现</view>
            </view>

            <view class="row j-sb a-center">
                <view class="d-flex f-column">
                    <text class="name_title">总收益 (元)</text>
                    <text class="white size32 m-top10">{{ commission.cumulative_income }}</text>
                </view>
                <view class="d-flex f-column">
                    <text class="name_title">已提现 (元)</text>
                    <text class="white size32 m-top10">0.00</text>
                </view>
                <view class="d-flex f-column">
                    <text class="name_title">待入账 (元)</text>
                    <text class="white size32 m-top10">0.00</text>
                </view>
            </view>

            <view class="Mores top">
                <!-- <view class="d-flex a-center white" @click="toUrl(`recharge_Info`)">
                    <text class="size26">收益明细</text>
                    <view class="iconfont icon-a-zujian7 h7 m-left10"></view>
                </view> -->
            </view>
        </view>

        <view class="circle">
            <view class="flex-1 d-flex f-column">
                <text class="black size32 bold">我的达人{{ commission.my_team_num }}人</text>
                <view class="d-flex a-center m-top16">
                    <view class="d-flex a-center">
                        <text class="master">正式达人{{ commission.my_team_member }}人</text>
                        <text class="master">体验达人{{ commission.my_team_no_member }}人</text>
                    </view>
                    <!-- <view class="iconfont icon-a-zujian7 color_33 h7 m-left10"></view> -->
                </view>
            </view>
            <view class="withdraw_btn" @click="showShareQr = true">邀请好友</view>
        </view>

        <view class="listBox">
            <view class="list bot" @click="toUrl(`myFans`)">
                <view class="flex-1 d-flex a-center">
                    <image :src="$staticImg('m_verm_1.png')" class="verImg"></image>
                    <text class="color_33 size30">我的达人</text>
                </view>
                <view class="iconfont icon-a-zujian7 color_cc h6"></view>
            </view>
            <view class="list bot" @click="toUrl(`fenxiaoOrder`)">
                <view class="flex-1 d-flex a-center">
                    <image :src="$staticImg('m_order_1.png')" class="verImg"></image>
                    <text class="color_33 size30">分销订单</text>
                </view>
                <view class="iconfont icon-a-zujian7 color_cc h6"></view>
            </view>
            <!-- <view class="list bot " @click="toUrl(`recharge_Info`)">
				<view class="flex-1 d-flex a-center">
					<image :src="$staticImg('m_money_1.png')" class="verImg"></image>
					<text class="color_33 size30">余额明细</text>
				</view>
				<view class="iconfont icon-a-zujian7 color_cc h6"></view>
			</view> -->
            <view class="list bot" @click="toUrl(`inviteRule`)">
                <view class="flex-1 d-flex a-center">
                    <image :src="$staticImg('m_tixian_1.png')" class="verImg"></image>
                    <text class="color_33 size30">提现说明</text>
                </view>
                <view class="iconfont icon-a-zujian7 color_cc h6"></view>
            </view>
            <view class="list bot" @click="toUrl(`addBank`)">
                <view class="flex-1 d-flex a-center">
                    <image :src="$staticImg('m_bank_1.png')" class="verImg"></image>
                    <text class="color_33 size30">银行卡管理</text>
                </view>
                <view class="iconfont icon-a-zujian7 color_cc h6"></view>
            </view>
            <view class="list bot" @click="showShareQr = true">
                <view class="flex-1 d-flex a-center">
                    <image :src="$staticImg('m_code_1.png')" class="verImg"></image>
                    <text class="color_33 size30">推广二维码</text>
                </view>
                <view class="iconfont icon-a-zujian7 color_cc h6"></view>
            </view>
        </view>

        <Load v-if="!commission"></Load>
        <SharePoster v-if="showShareQr" myid=" " type="0" pageType="0" @closePoster="showShareQr = false"></SharePoster>
    </view>
</template>

<script>
    import { mapState, mapMutationsf } from 'vuex';
    import SharePoster from '@/components/sharePoster.vue';
    export default {
        components: {
            SharePoster
        },
        data() {
            return {
                title: '推广达人',
                showShareQr: false,
                commission: '',
                teamConfig: ''
            };
        },
        onShow() {
            this.my_income();
        },
        methods: {
            my_income() {
                let that = this;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/my_income'
                    })
                    .then((res) => {
                        if (res.errcode == 100) {
                            that.commission = res.data;
                            that.teamConfig = res.teamConfig;
                        }
                    });
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'nameDefinition', 'openid'])
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $pageBg;
    }
</style>
<style lang="scss" scoped>
    .Info {
        height: 380rpx;
        border-radius: 20rpx;
        padding: 30rpx 24rpx 0 24rpx;
        overflow: hidden;
        background-image: url('http://sraimgcdn2.mogoie.com/Uploads/xiangqing/userbg.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .withdraw_btn {
        width: 160rpx;
        height: 60rpx;
        background-color: var(--color);
        border-radius: 30rpx;
        color: #ffffff;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .name_title {
        color: #d8d8d8;
        font-size: 26rpx;
    }

    .Mores {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .circle {
        width: 690rpx;
        margin: 24rpx auto;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx 24rpx;
        display: flex;
        align-items: center;
    }

    .master {
        color: #333333;
        font-size: 26rpx;
        position: relative;
    }

    .master:first-child {
        padding-right: 14rpx;
    }

    .master:last-child {
        padding-left: 14rpx;
    }

    .master:first-child::after {
        content: '';
        width: 1px;
        height: 24rpx;
        background-color: #d8d8d8;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }

    .listBox {
        width: 690rpx;
        background-color: #ffffff;
        margin: 24rpx auto;
        padding-left: 24rpx;
        border-radius: 20rpx;
    }

    .list {
        width: 100%;
        height: 94rpx;
        display: flex;
        align-items: center;
        padding-right: 24rpx;
    }

    .verImg {
        width: 46rpx;
        height: 46rpx;
        margin-right: 20rpx;
    }
</style>